<template ref="transEvent">
    <el-row :gutter="10" class="hdpi">
        <el-col :lg="5" :md="5" class="hidden-md-and-down">
            <el-collapse :value="activeName" style="border:0;">
                <el-collapse-item  v-for="(item,index) in groupslist" :title="item.name" :name="item.id" class="grid-back collapse-custom" >
                    <div v-if="item.childrens==null ||item.childrens.length==0" class="group-device" v-for="devices in item.list">{{devices.name}} <span style="font-size:16px;" class="fr">{{devices.stateText}}</span></div>
                    
                    <el-collapse v-if="item.childrens&&item.childrens.length>0" :value="activeName2" style="border:0;">
                        <el-collapse-item  v-for="childrens in item.childrens" :title="childrens.name" :name="childrens.id" class="grid-back collapse-custom" >
                            <div class="group-device" v-for="devices in childrens.list">{{devices.name}} <span style="font-size:16px;" class="fr">{{devices.stateText}}</span></div>
                        </el-collapse-item>
                    </el-collapse>
                </el-collapse-item>
                <!-- <el-collapse-item v-for="(item,index) in groupslist" :title="item.name" :name="item.id" class="grid-back collapse-custom" >
                    <div class="group-device" v-for="devices in item.list">{{devices.name}} <span style="font-size:16px;" class="fr">{{devices.stateText}}</span></div>
                </el-collapse-item> -->
            </el-collapse>
        </el-col>
        <el-col :lg="17" :md="17" style="margin: 20px;">
            <div style="color:#fff;font-size:19px;margin-top:20px">数据概览</div> 
            <div class="grid-back" style="margin: 20px 0;display: flex;justify-content: space-between;align-items: center;">
                 <el-date-picker
                    v-model="datelist"
                    type="date"
                    placeholder="选择日期"
                    @change="selectdate1"
                    value-format="yyyy-MM-dd"
                    v-if="!showmonth">
                </el-date-picker>
                    <el-date-picker
                    v-model="datelist"
                    type="month"
                    placeholder="选择月份"
                    @change="selectdate2"
                    v-if="showmonth">
                </el-date-picker>
                <div style="font-size:18px;cursor: pointer;" @click="changedate()">
                    <span>{{datetext}}</span>
                    <i class="el-icon-sort" style="transform: rotateZ(90deg);"></i>
                </div>
            </div>
            <div style="display: flex;justify-content: space-between;">
                 <el-col class="grid-back grid-detailed" :span="7">
                     <div>
                        <div>总收入</div>
                        <div><span style="font-size:40px;">{{allincome}}</span>元</div>
                        <div>充电费:{{chargingfee}}元</div>
                        <div>服务费:{{servicefee}}元</div>
                     </div>
                 </el-col>
                 <el-col class="grid-back grid-detailed" :span="7">
                     <div>
                        <div>总充电量</div>
                        <div><span style="font-size:40px;">{{allcharge}}</span>度</div>
                     </div>
                 </el-col>
                 <el-col class="grid-back grid-detailed" :span="7">
                     <div>
                        <div>总订单量</div>
                        <div><span style="font-size:40px;">{{allOrder}}</span></div>
                     </div>
                 </el-col>
            </div>
            <div style="color:#fff;font-size:19px;margin-top:20px">{{incometext}}</div> 
            <!-- <div style="color:#fff;font-size:19px;margin-top:20px">收入统计图</div>  -->
            <div :span="24" id="chartColumn1" style="width:100%;height:400px;"></div>
        </el-col>
    </el-row>
</template>

<script>
import echarts from "echarts";
import {
    device_company_group_query,
    device_group_query,
    device_data_analyse,
    device_data_analyse_query
} from "../../api/api"
export default {
    data(){
        return{
            devicelist:[],
            activeName: [],
            activeName2:[],
            listLoading: false,
            groupslist:[],//分组列表
            datelist:"",//时间日期
            startTime:'',//开始时间（订单总量接口用到）
            endTime:'',//结束时间（订单总量接口用到）
            showmonth: false,//切换日和月
            datetext:'日',//文本显示"月"或者"日"
            incometext:'最近三十天收入',//文本显示
            allincome:'',//总收入
            allincomeDaylist:[],//最近30天收入日期数组（充电）
            allserveDaylist:[],//最近30天收入日期数组（服务）
            allincomeSumslist:[],//最近30天充电费收入数组
            allserveSumslist:[],//最近30天服务费收入数组
            chargingfee:'',//充电费
            servicefee:'',//服务费
            allcharge:'',//总充电量
            allOrder:'',//订单总量
            chartColumn1:null,//统计图元素的ID
        }
    },
    methods:{
        getgroup(){//获取分组列表
            this.listLoading = true;
            let para = {
                pageNo: 1,
                pageSize: 1000,  
            };
            device_group_query(para).then(res => { 
            var newObj
            let oldgroupslist=res.data
            let newgroupslist=[]
            this.begCode(res.code);
            // this.getrecursion(res.data);
            // this.groupslist = res.data
            this.listLoading = false;     
            for(let i in oldgroupslist){//过滤掉不含充电站的分组
                if(oldgroupslist[i].name.indexOf('充电站') > -1){
                    newgroupslist.push(oldgroupslist[i])
                }
            }
            // console.log(this.oldgroupslist)
            this.groupslist = newgroupslist
            for(let i in this.groupslist){
                // this.activeName.push(this.groupslist[i].id)//默认展开所有列表
                console.log(this.groupslist[i].childrens.length)
                if(this.groupslist[i].childrens!=null && this.groupslist[i].childrens.length > 0){
                    this.groupslist[i].childrens.forEach(datas => {
                        // console.log(datas)
                        let para1 = {
                            deviceGroupId: datas.id,
                            mini: 5,
                            pageNo: 1,
                            pageSize: 1000,
                        }
                        device_company_group_query(para1).then(res => {
                            var newObj1 = []
                            for(let j in res.data.list){
                                if(res.data.list[j].deviceTypeId != "214"){//根据设备id(deviceTypeId)过滤掉含有摄像头的设备
                                    newObj1.push(res.data.list[j])
                                    this.$set(datas,'list',newObj1)
                                }
                            }
                        })
                    });
                }
                let para = {
                    deviceGroupId: this.groupslist[i].id,
                    mini: 5,
                    pageNo: 1,
                    pageSize: 1000,
                    // deviceTypeId: 214,//过滤掉不含有摄像头的设备
                }
                device_company_group_query(para).then(res => {
                        // console.log(res)
                        var newObj = []
                        for(let j in res.data.list){
                            if(res.data.list[j].deviceTypeId != "214"){//根据设备id(deviceTypeId)过滤掉含有摄像头的设备
                                newObj.push(res.data.list[j])
                                // console.log(newObj)
                                this.$set(this.groupslist[i],'list',newObj)
                            }
                        }
                        // Object.assign(this.groupslist[i],newObj)
                });
            }
            console.log(this.groupslist)
            });
        },
        getrecursion(data) {
        for (var i in data) {
          this.groupslist.push(data[i]);
          OUT:
          if (!data[i].childrens) {
            break OUT;
          } else {
            this.getrecursion(data[i].childrens);
          }
        }
        // console.log(this.groupslist)
      },
      selectdate1(e){//选择年月日
        console.log(e)
        if(e){
         this.startTime = e + ' 00:00:01'
         this.endTime = e + ' 23:59:59'
        }

        let para = {
            registerList:'32810-4-6,32811-4-7,32812-4-8,32813-4-9',
            endDate: this.datelist,//结束时间
            type: 1,//日:1，周:2，月:3 
            num: 1,//结束时间前num天至结束时间
        }
        device_data_analyse(para).then(res =>{
            console.log(res.data)
            this.allincome = res.data["32811-4-7"][0].sums
            this.chargingfee = res.data["32812-4-8"][0].sums
            this.servicefee = res.data["32813-4-9"][0].sums
            this.allcharge = res.data["32810-4-6"][0].sums
            this.getAllorder()
        })
      },
      selectdate2(e){//选择年月
        console.log(e)
         let date = new Date(e);
         let month = (date.getMonth() + 1).toString().padStart(2,'0');//padStart的用法https://blog.csdn.net/ixygj197875/article/details/79090578
         let year = date.getFullYear();
         let day = new Date(year,month,0);
         let endTime = year + '-' + month + '-' + day.getDate();

        this.startTime = year + '-' + month + '-'+'01' + ' 00:00:01'
        this.endTime = endTime +' 23:59:59'
        let para = {
            registerList:'32810-4-6,32811-4-7,32812-4-8,32813-4-9',
            endDate: endTime,//结束时间
            type: 1,//日:1，周:2，月:3 
            num: 30,//结束时间前num天至结束时间
        }
        device_data_analyse(para).then(res =>{
            console.log(res)
            this.allincome=0
            this.chargingfee=0
            this.servicefee=0
            this.allcharge=0
            //计算月份总量
            for(let i in res.data["32811-4-7"]){//总收入
                this.allincome += res.data["32811-4-7"][i].sums
            }
            for(let i in res.data["32812-4-8"]){//充电费
                this.chargingfee += res.data["32812-4-8"][i].sums
            }
            for(let i in res.data["32813-4-9"]){//服务费
                this.servicefee += res.data["32813-4-9"][i].sums
            }
            for(let i in res.data["32810-4-6"]){//充电总量
                this.allcharge += res.data["32810-4-6"][i].sums
            }
            // this.drawColumnChart1()
            this.getAllorder()
            
        })
      },
      getmonthMoney(type,num){//最近30天收入
            let para = {
                registerList:'32810-4-6,32811-4-7,32812-4-8,32813-4-9',
                endDate: this.datelist,//结束时间
                type: type,//日:1，周:2，月:3 
                num: num,//结束时间前num天至结束时间
            }
            device_data_analyse(para).then(res =>{
                console.log(res)
                 this.allincomeDaylist=[]
                 this.allincomeSumslist=[]
                 this.allserveSumslist=[]
                 for(let i in res.data["32811-4-7"]){//总收入
                    this.allincomeDaylist.push(res.data["32811-4-7"][i].days)
                    this.allincomeSumslist.push(res.data["32811-4-7"][i].sums)
                }
                for(let j in res.data["32813-4-9"]){
                    // this.allserveDaylist.push(res.data["32813-4-9"][j].days)
                    this.allserveSumslist.push(res.data["32813-4-9"][j].sums)
                }
                console.log(this.allserveSumslist)
                this.drawColumnChart1()
                // console.log(this.allincomeDaylist)
                // console.log(this.allincomeSumslist)
            })
      },
      changedate(){//切换日和月
        // console.log(this.showmonth)
        this.showmonth=!this.showmonth
        if(this.showmonth){
            this.datetext = "月"
            console.log(this.incometext)
            this.incometext = "最近十二个月收入"
            // console.log('这里显示月份')
            let date1 = new Date()
            // console.log(date1)
            this.selectdate2(date1)
            this.getmonthMoney(3,12)
        }else if(!this.showmonth){
            this.datetext = "日"
            this.incometext = "最近三十天收入"
            this.selectdate1(this.datelist)
            this.getmonthMoney(1,30)
        }
      },
      drawColumnChart1(){
        let _this = this
         _this.chartColumn1 = echarts.init(document.getElementById("chartColumn1"));
         _this.chartColumn1.setOption({
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['总收入', '服务费'],
                textStyle:{
                    color:'#fff'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,//坐标轴两边留白策略
                data: _this.allincomeDaylist,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color:'#fff'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color:'#fff'
                    }
                }
            },
            series: [
                {
                    name: '总收入',
                    type: 'line',
                    // stack: '总量',
                    data: _this.allincomeSumslist
                },
                {
                    name: '服务费',
                    type: 'line',
                    // stack: '总量',
                    data: _this.allserveSumslist,
                     itemStyle : {  
                        normal : {  
                            color: "#4395ff",//图例的颜色
                            lineStyle:{  
                                color:'#4395ff'//线的颜色
                            }  
                        }  
                    }, 
                },
            ]
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            //         type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
            //     },
               
            // },
            // grid: {
            //     left: '3%',
            //     right: '4%',
            //     bottom: '3%',
            //     containLabel: true,
            // },
            // xAxis: [
            //     {
            //         type: 'category',
            //         data: _this.allincomeDaylist,
            //         axisTick: {
            //             alignWithLabel: true
            //         },
            //         axisLabel: {
            //             show: true,
            //             textStyle: {
            //                 color:'#fff'
            //             }
            //         }
            //     }
            // ],
            // yAxis: [
            //     {
            //         type: 'value',
            //         axisLabel: {
            //             show: true,
            //             textStyle: {
            //                 color:'#fff'
            //             }
            //         }
            //     }
            // ],
            // series: [
            //     {
            //         name: '总收入',
            //         type: 'bar',
            //         barWidth: '10%',
            //         data: _this.allincomeSumslist
            //     }
            // ]
        });
        this.chartColumn1.resize()
      },
      getAllorder(){
          let para = {
              startTime: this.startTime,
              endTime: this.endTime,
              pageSize: 1,
              pageNo: 1,
              deviceRecipeBodyId: '32807',
              deviceSlave: 4,
              register: 3,
          }
        //   console.log(para)
          device_data_analyse_query(para).then(res =>{
              console.log(res)
              this.allOrder = res.data.totalCount
          })
      },
      getDate(){
          let date = new Date()
          let year = date.getFullYear();
          let month = (date.getMonth() + 1).toString().padStart(2,'0');
          let hour = date.getHours();
          let minute = date.getMinutes();
          let second = date.getSeconds();

          let day = date.getDate()
          this.datelist = year + '-' + month + '-' + day
          this.startTime = year + '-' + month + '-' + day + ' ' + hour + ':' +minute + ':' + second
          this.endTime = year + '-' + month + '-' + day + ' 23:59:59'
          console.log(this.startTime)
          console.log(this.endTime)
          this.selectdate1(this.datelist)
          this.getmonthMoney(1,30)
          
        //   console.log(year + '-' + month + '-' + day)
      },
    //   handleselect(e){
    //       console.log(e)
    //   }
    },
    mounted(){
        this.getDate()
        this.getgroup()
    }
}
</script>

<style>
    .hdpi{
        height: 100%;
    }
    .hidden-md-and-down{
        margin: 20px;
        max-height: 85vh;
        overflow: auto;
    }
    .hidden-md-and-down::-webkit-scrollbar{
        display:none
    }
    .grid-back {
        position: relative;
        background-size: 100%;
        padding: 2% 10px ;
        /* min-height: 300px; */
        background-position: top, bottom;
        background-image: url(../../assets/01.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color:#fff;
  }
  .grid-back-title{
      text-align: center;
      font-size: 20px;
      padding: 30px 0;
  }
  .el-date-editor>input{
      background: #042B5B;
      color: #fff;
      opacity: 0.5;
  }
  .grid-detailed{
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .collapse-custom .el-collapse-item__header{
      background: #0c3465;
      border-bottom: 1px;
      font-size: 20px;
      /* text-align: center; */
      opacity: .8;
  }
  .collapse-custom .el-collapse-item__content{
      padding: 0;
      border: 0;
      background: #0c3465;
      opacity: .8;
  }
  .collapse-custom .el-collapse-item__wrap{
      border: 0;
      background: #0c3465;
      opacity: .8;
  }
  .group-device{
      color: #fff;
      /* text-align: center; */
      font-size: 18px;
      cursor: pointer;
      margin: 10px 0;
      padding: 10px 20px;
  }
  .group-device:hover{
      background: #2b5486;
  }
</style>